export default {
    props: {
        tag: {
            type: String,
            default: "div",
        },
        span: {
            type: Number,
            fault: 24,
        },
        offset: {
            type: Number,
            default: 0,
        },
        push: {
            type: Number,
            default: 0,
        },
        pull: {
            type: Number,
            default: 0,
        },
        xs: [Number, Object],
        sm: [Number, Object],
        md: [Number, Object],
        lg: [Number, Object],
        xl: [Number, Object],
    },
    name: "ELCol",
    data() {
        return {};
    },
    computed: {
        // gutter:即row一行中每一列间隔的大小
        gutter() {
            let parent = this.$parent;
            // 1.gutter是传递给row组件的,但是需要再col组件中实现间隔
            // 2.可能col组件的外层嵌套着col组件,因此需要一直往上寻找,直到找到父组件为row组件为止
            // 3.parent.$options:存储的是父组件中的所有配置项
            while (parent && parent.$options.name != "el-row") {
                parent = parent.$parent;
            }
            return parent ? parent.gutter : 0;
        },
        style() {
            const style = {};
            if (this.gutter) {
                style.paddingLeft = this.gutter / 2 + "px";
                style.paddingRight = style.paddingLeft;
            }
            return style;
        },
        classList() {
            const classList = [];
            ["span", "offset", "push", "pull"].forEach((item) => {
                // 假如offset为0,即margin-left为0时,会导致pull效果不生效,因为margin权重高于定位,
                // 因此使用if判断,假如offset为0,那么类样式就不会将offset设置到div中,pull就不会受到影响
                if (this[item]) {
                    // this[item]:计算属性
                    classList.push(
                        item === "span"
                            ? `el-col-${this[item]}`
                            : `el-col-${item}-${this[item]}`
                    );
                }
            });
            ["xs", "sm", "md", "lg", "xl"].forEach((item) => {
                // 判断传递过来的是数字还是对象
                if (typeof this[item] == "number") {
                    classList.push(`el-col-${item}-${this[item]}`);
                } else if (this[item] instanceof Object) {
                    // {span:6,offset:8,push:7,pull:9}
                    // el-col-xs-6,el-col-xs-offset-8
                    // 此时prop是一个包含span,offset等属性的对象
                    const props = this[item];
                    Object.keys(props).forEach((prop) => {
                        classList.push(
                            prop === "span"
                                ? `el-col-${item}-${props[prop]}`
                                : `el-col-${item}-${prop}-${props[prop]}`
                        );
                    });
                }
            });
            return classList;
        },
    },
    render(h) {
        return h(this.tag, {
            class: [
                'el-col',
                this.classList
            ],
            style: this.style
        }, this.$slots.default)
    }
};